<!-- 账号注册页 -->
<template>
	
	
	<view class="container">
		<view class="forms">
			<view class="game-title">账号注册</view>
			
			<input
				type="text" 
				class="game-input-box" 
				v-model="formData.username" 
				trim="both" 
				placeholder="用户名"
			/>
			
			
			<input
				type="password" 
				class="game-input-box" 
				v-model="formData.password" 
				required 
				placeholder="密码"
			/>
			
			<input
				type="password" 
				class="game-input-box" 
				v-model="formData.password2" 
				required 
				placeholder="再次输入密码"
			/>
			
			<view class="register-btn" @click="submit">立即注册</view>
			<navigator class="register" url="/pages/login/login">已有账号？去登录</navigator>
			
			
		</view>
	</view>
	
	
</template>

<script>

	export default {

		data() {
			return {
				formData: {
					username: "",
					password: "",
					password2: ""
				}
			}
		},
		onReady() {
			
		},
		onShow() {

		},
		methods: {
			/**
			 * 触发表单提交
			 */
			async submit() {
				
				if(this.formData.password != this.formData.password2){
					return uni.showToast({
						title:'两次输入密码不一致',
						icon : 'none'
					})
				}
				
				this.$request({
					name : 'account',
					method : 'register',
					username : this.formData.username,
					password : this.formData.password,
				}).then(res => {
					uni.reLaunch({
						url : '/pages/login/login'
					})
				})

				
			}
		}
	}
</script>

<style lang="scss">
	
	.container{
		width:100vw;
		height:100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		.forms{
			width:400px;
			.game-title{
				text-align: center;
				padding-bottom:20px;
				font-size: 24px;
				font-weight: bold;
			}
			
			.register-btn{
				@include game-btn;
				height:40px;
				margin-bottom:10px;
			}
			.register{
				text-decoration: underline;
				display: inline;
				cursor: pointer;
				&:hover{
					color:#ffffff
				}
			}
		}
	}
</style>
